<template>

  <div>

    <div id="PersonalCenter">
      <header>
       <span onclick="history.go(-1)"><img src="../assets/箭头.png" alt="" ></span>
        <h2>个人中心</h2>
       <span  ><img src="../assets/设置.png" alt="" style="position: relative;
      left: 2rem;"></span>
      </header>

      <div class="personInfor">
        <!--头部个人信息-->
        <div class="personInfor_img">
          <img src="../assets/tip.png" alt="">
          <p><span>姓名</span><span>188****8888</span></p>
        </div>
        <!--申请提现-->
        <div class="WithdrawCash">
          <ul>
            <li>
              <p>总授信额度(元)</p>
              <p><span>￥</span><span>1000</span></p>
              <button>申请临时提额</button>
            </li>
            <span style="font-weight: 100;font-size: 4rem">|</span>
            <li>
              <p>可提现额度(元)</p>
              <p><span>￥</span><span>500</span></p>
              <button>我要提现</button>
            </li>

          </ul>
        </div>

      </div>

      <div class="personalDetialList">
        <ul>
          <li @click="MyBill()"><img src="../assets/我的成长账单.png" alt=""><span>我的账单</span><span><img src="../assets/gengduo.png" alt=""></span></li>
          <li><img src="../assets/我的成长账单.png" alt=""><span>我的银行卡</span><span><img src="../assets/gengduo.png" alt=""></span></li>
          <li><img src="../assets/提额.png" alt=""><span>申请提额</span><span><img src="../assets/gengduo.png" alt=""></span></li>
          <li><img src="../assets/提额.png" alt=""><span>申请临时提额</span><span><img src="../assets/gengduo.png" alt=""></span></li>
          <li><img src="../assets/我的成长账单.png" alt=""><span>运营商认证</span><span><img src="../assets/gengduo.png" alt=""></span></li>
          <li><img src="../assets/我的成长账单.png" alt=""><span>趣当铺</span><span><img src="../assets/gengduo.png" alt=""></span></li>
          <li><img src="../assets/问题.png" alt=""><span>常见问题</span><span><img src="../assets/gengduo.png" alt=""></span></li>
          <li><img src="../assets/我的成长账单.png" alt=""><span>联系客服</span><span><img src="../assets/gengduo.png" alt=""></span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    name:'myCenter',

    data() {
      return {
        message:111
      }
    },
    methods: {
      MyBill() {
        this.$router.push({path: '/MyBill'})
      }
    },
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>

  #PersonalCenter{
    width: 100%;
    margin: auto;
  }
  header{
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 1rem;
    h2{
      width: 30%;
      font-size: 1.8rem;
      font-weight: 200;
    }
    img{
      width: 2rem;
      height: 2rem;
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    img:nth-child(1){
     position: relative;
      right: 2rem;
    }
  }
  .personInfor{
    width: 100%;
    background: #32D69C;
    //background: red;
    .personInfor_img{
      width: 100%;
      height: auto;
      border-bottom: 1px solid white;
      overflow: hidden;
      img{
        width: 4rem;
        height: 4rem;
        border-radius: 100%;
        float: left;
        display: inline-block;
        padding: 1rem;
        /*position: relative;*/
        /*left: 1.5rem;*/
        /*top: 1.5rem;*/
      }
      p{
        float: left;
        height: 4rem;
        line-height: 4rem;
        padding: 1rem;
        //border: 1px solid;
        font-size:1.6rem;
        color: white;
        span{
          margin-right: 1rem;
        }
      }
    }
  }
  .WithdrawCash{
    width: 100%;
    height:auto;
    //background: #229DEE;
    ul{
      width: 100%;
      height:auto;
      display: flex;
      justify-content: space-around;
      list-style: none;
      padding-bottom:1rem;
      span{
        width: 1rem;
        height: 6rem;
        color: white;
        //border: 1px solid;
      }
      li{
        width: 35%;
        height: auto;
        //border: 1px solid;
        text-align: center;

        p:nth-child(1){
          font-size:1.4rem ;
          color:white;
          margin-top:1rem;
        }
        p:nth-child(2){
          color: white;
          font-size:2rem;
          padding-top: 0.5rem;
        }

        button{
          width: 100%;
          height: 3rem;
          line-height: 3rem;
          outline: none;
          border: 1px solid white;
          text-align: center;
          background: #5CDEA8;
          color: white;
          border-radius:3rem;
          margin-top: 1rem;
          //border: 0;
          outline: none;
        }
      }
    }
  }
  .personalDetialList{
    width: 100%;
    ul{
      width: 100%;
      height: 40rem;
      background: white;
      list-style: none;
      overflow: hidden;

      li{
        width: 100%;
        height: 4rem;
        line-height:4rem;
        border-bottom: 1px solid #F1F1F1;
        font-size: 1.4rem;
        overflow: hidden;
        span:nth-child(2){
          width: auto;
          height: 4rem;
          line-height: 4rem;
          font-size: 1.4rem;
          display: inline-block;
          float: left;
          position: relative;
          left: 2rem;

        }
        span:nth-last-child(1){
          display: inline-block;
          float: right;
          position: relative;
          right: 2rem;
          img{
            width: 1rem;
            height: 1.5rem;
            display: inline-block;
            padding-top: 0.3rem;
          }
        }
        img{
          width: 2rem;
          height: 2rem;
          float: left;
          position: relative;
          left: 1rem;
          top: 1rem;
        }
      }
    }
  }
</style>
